<script>
import ImageAvater from "../../../components/shiqinComponents/pageComponents/imageAvater.vue";
import {wechatMoments} from "../../../api/shiqinAPI";

export default {
  name: "familyCircle",
  components: {ImageAvater},
  props: {
    info: {
      type: Object,
      default: () => {
        return {}
      }
    },
    border: {
      type: Boolean,
      default: true
    },
    index:{
      type: Number,
      default: 0
    }
  },
  methods: {
    elementClick() {
      this.$emit('elementClick')
    },
    // 点赞朋友圈
    likeInterface() {
      wechatMoments({
        moment_id: this.info.id
      }).then(res => {
        if (res.status == '200') {
          this.$emit('likeInterface',this.index)
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          })
        }
      })
    }
  },
}
</script>

<template>
  <view class="familyCircle" @click="elementClick">
    <view class="familyCircle_all row" :style="{
      borderBottom:border? '2rpx solid #E5E5E5': 'none'
    }">
      <view class="familyCircle_all_left">
        <image-avater :width="62" :height="62" :src="info.avatar"></image-avater>
      </view>
      <view class="familyCircle_all_right ml-17">
        <view class="familyCircle_all_right_name row items-center">
          <text class="familyCircle_all_right_name_text">{{ info.username }}</text>
          <view class="familyCircle_all_right_name_label ml-18 allRowCenter" v-if="!!info.remark">
            <text class="familyCircle_all_right_name_label_text">{{ info.remark }}</text>
          </view>
        </view>
        <view class="familyCircle_all_right_content mt-7">
          <u-parse :html="info.content" class="familyCircle_all_right_content_text"></u-parse>
        </view>
        <view class="familyCircle_all_right_imageList mt-17" v-if="!!info.image">
          <view class="familyCircle_all_right_imageList_all allRowCenter" v-for="(item,index) in info.image.split(',')"
                :key="index">
            <image class="familyCircle_all_right_imageList_image" :src="item" mode="widthFix"></image>
          </view>
        </view>
        <view class="familyCircle_all_right_time mt-10" v-if="!!info.time_text">
          <text class="familyCircle_all_right_time_text">{{ info.time_text }}</text>
        </view>
        <view :class="!!info.record && !!info.record.length?'':'mb-48'" class="familyCircle_all_right_operationList row justify-end mt-10">
          <view class="familyCircle_all_right_operationList_thumbsUp allColumnCenter" @click.stop="likeInterface">
            <image class="familyCircle_all_right_operationList_thumbsUp_image"
                   :src="info.is_click == 1 ? '/static/shiqin-images/thumbsUp_select.png':'/static/shiqin-images/thumbsUp.png'"
                   mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_thumbsUp_text mt-5">点赞 {{ info.click_num }}</text>
          </view>
          <view class="familyCircle_all_right_operationList_comments allColumnCenter">
            <image class="familyCircle_all_right_operationList_comments_image" src="/static/shiqin-images/comments.png"
                   mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_comments_text">评论 {{ info.comment }}</text>
          </view>
          <view class="familyCircle_all_right_operationList_share allColumnCenter">
            <image class="familyCircle_all_right_operationList_share_image" src="/static/shiqin-images/share.png"
                   mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_share_text">分享</text>
          </view>
        </view>
        <view class="familyCircle_all_right_likesDetails row items-center mt-20  mb-48" v-if="!!info.record && !!info.record.length">
          <image class="familyCircle_all_right_likesDetails_image" src="/static/shiqin-images/thumbsUp_select.png"
                 mode="widthFix"></image>
          <text class="familyCircle_all_right_likesDetails_text ellipsis-multiline webkit-line-clamp-1 ml-9">
            {{info.record.join('、')}}
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.familyCircle {
  width: 702rpx;
  //background: #FDFDFD;
  //border-radius: 21rpx 21rpx 21rpx 21rpx;

  overflow: hidden;

  .familyCircle_all {
    margin: 20rpx 21rpx;
    border-bottom: 2rpx solid #E5E5E5;

    .familyCircle_all_left {
      width: 62rpx;
    }

    .familyCircle_all_right {
      width: 572rpx;

      .familyCircle_all_right_name {
        .familyCircle_all_right_name_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #000000;
        }

        .familyCircle_all_right_name_label {
          width: 66rpx;
          height: 30rpx;
          background: #FF7950;
          border-radius: 15rpx 15rpx 15rpx 15rpx;

          .familyCircle_all_right_name_label_text {
            font-weight: 500;
            font-size: 16rpx;
            color: #FFFFFF;
          }
        }
      }

      .familyCircle_all_right_content {
        width: 572rpx;
        &_text {
          width: 572rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #0F0F0F;
        }
      }

      .familyCircle_all_right_imageList {
        width: 534rpx;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: none;
        grid-column-gap: 15rpx;
        grid-row-gap: 15rpx;

        .familyCircle_all_right_imageList_all {
          width: 168rpx;
          height: 168rpx;
          border-radius: 20rpx;
          overflow: hidden;

          .familyCircle_all_right_imageList_image {
            min-width: 168rpx;
            min-height: 168rpx;
          }
        }
      }

      .familyCircle_all_right_time {
        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 300;
          font-size: 20rpx;
          color: #4B4B4B;
        }
      }

      .familyCircle_all_right_dividingLine {
        width: 572rpx;
        border: 2rpx solid #EAEAEA;
      }

      .familyCircle_all_right_operationList {
        width: 534rpx;

        .familyCircle_all_right_operationList_thumbsUp {
          &_image {
            width: 39rpx;
            height: 39rpx;
          }

          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }

        .familyCircle_all_right_operationList_comments {
          margin: 0 39rpx;

          &_image {
            width: 39rpx;
            height: 39rpx;
          }

          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }

        .familyCircle_all_right_operationList_share {
          &_image {
            width: 39rpx;
            height: 39rpx;
          }

          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 18rpx;
            color: #3B3B3B;
          }
        }
      }

      .familyCircle_all_right_likesDetails {
        &_image {
          width: 23rpx;
          height: 39rpx;
        }

        &_text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #656565;
        }
      }
    }
  }
}
</style>